import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    isShowOperateBar: false, // 是否显示操作栏
    operateBarContentLayerXY: { x: 0, y: 0 }, // 操作栏位置
    isShowAddMenu: false, // 是否显示菜单
    addMenuContentLayerXY: { x: 0, y: 0 }, // 菜单位置
    isShowStyleBar: false, // 是否显示样式bar
    styleBarContentLayerXY: { left: 0, top: 0 }, // 样式bar位置
    isShowFileSize: false, // 是否显示图片大小调节
    currentBlockIndex: 0,  // 当前块index
    currentPageBlocks: [
        { "type": "heading1", "data": { "html": "<h1>fire-note 是什么</h1>", 'text': 'fire-note 是什么' } },
        { "type": "text", "data": { "html": "fire-note 是一个开源的模块化内容构建编辑器，它不同于传统的文本编辑器，所有的内容都是以模块的概念来打造。灵感来自Notion", 'text': 'fire-note 是一个开源的模块化内容构建编辑器，它不同于传统的文本编辑器，所有的内容都是以模块的概念来打造。灵感来自Notion' } },
        { "type": "heading2", "data": { "html": "<h2>灵活的插拔</h2>", 'text': '灵活的插拔' } },
        { "type": "text", "data": { "html": "所有的模块都以VUE组件的形式编写，可以灵活插拔。你可以用fire-note编辑器构建一个模块化的内容平台，可以在一个页面里插入任何其他模块，就像Notion一样", 'text': '所有的模块都以VUE组件的形式编写，可以灵活插拔。你可以用fire-note编辑器构建一个模块化的内容平台，可以在一个页面里插入任何其他模块，就像Notion一样' } },
        { "type": "heading3", "data": { "html": "<h3>纯净的输出</h3>", 'text': '纯净的输出' } },
        { "type": "text", "data": { "html": "所有组件保存的数据，都以Json的形式存储在Vuex里供不同组件调用", 'text': '所有组件保存的数据，都以Json的形式存储在Vuex里供不同组件调用' } },
        { "type": "bulletedList", "data": { "html": "其他一些小的问题", 'text': '其他一些小的问题' } },
        { "type": "hint", "data": { "html": "👏 已实现的模块", 'text': '👏 已实现的模块' } },
        { "type": "text", "data": { "html": "", 'text': '' } },
        { "type": "image", "data": { "html": "<img src='https://riseusercontent.com/assets/rise/assets/marketing-images/circles/circle_6.png' style='width:40%;height:auto'></img>", 'text': '' } },
        { "type": "video", "data": { "html": "<video src='https://riseusercontent.com/assets/rise/assets/marketing-animations/enjoyable-training.mp4' style='width:60%;height:auto'></img>", 'text': '' } },
        { "type": "todo", "data": { "isChecked": true, "html": "纯文本", 'text': '纯文本' } },
    ],
}

const mutations = {
    // ------------  添加菜单  -------------
    // 是否显示添加菜单
    mutationIsShowAddMenu(state, isShowAddMenu) {
        state.isShowAddMenu = isShowAddMenu
    },
    // 修改添加菜单的位置
    mutationAddMenuContentLayerXY(state, addMenuContentLayerXY) {
        state.addMenuContentLayerXY = addMenuContentLayerXY
    },

    // ------------  操作栏  -------------
    // 是否显示添加操作栏
    mutationIsShowOperateBar(state, isShowOperateBar) {
        state.isShowOperateBar = isShowOperateBar
    },
    // 修改添加操作栏的位置
    mutationOperateBarContentLayerXY(state, operateBarContentLayerXY) {
        state.operateBarContentLayerXY = operateBarContentLayerXY
    },

    // ------------  文字样式  -------------
    // 是否显示样式Bar
    mutationIsShowStyleBar(state, isShowStyleBar) {
        state.isShowStyleBar = isShowStyleBar
    },
    // 修改添加样式Bar的位置
    mutationStyleBarContentLayerXY(state, styleBarContentLayerXY) {
        state.styleBarContentLayerXY = styleBarContentLayerXY
    },

    // ------------  图片视频大小  -------------
    // 是否显示图片视频大小
    mutationisShowFileSize(state, isShowFileSize) {
        state.isShowFileSize = isShowFileSize
    },
    mutationSetFileSize(state, { index, width }) {
        let value = state.currentPageBlocks[index].data.html,
            startIndex = value.indexOf("width:"),
            endIndex = value.indexOf("%;");
        // 重新设置宽度
        value =
            value.substring(0, startIndex) +
            `width:${width}` +
            value.substring(endIndex, value.length);
        state.currentPageBlocks[index].data.html = value
    },

    // ------------  模块  -------------
    // 修改当前块的index
    mutationCurrentBlockIndex(state, index) {
        state.currentBlockIndex = index
    },
    // 添加块
    mutationAddCurrentPageBlocks(state, addBlockInfo) {
        let index = addBlockInfo.index + 1
        state.currentPageBlocks.splice(index, 0, addBlockInfo.blockItem)
        // console.log(state.currentPageBlocks)
    },
    // 修改块
    mutationUpdateCurrentPageBlocks(state, addBlockInfo) {
        state.currentPageBlocks.splice(addBlockInfo.index, 1, addBlockInfo.blockItem)
    },
}


const getters = {
    getterCurrentPageBlocks(state) {
        return state.currentPageBlocks
    },
    getterAddMenuContentLayerXY(state) {
        let a = state.addMenuContentLayerXY
        let clientHeight = window.innerHeight
        if (a.y > (clientHeight / 2)) {
            a.y = a.y - 380
            a.y1 = a.y + 160
        }
        a.y = a.y + 20
        a.y1 = a.y1 + 20
        a.x = a.x + 48
        // a.y = `${a.y + 20}px`
        // a.x = `${a.x + 48}px`
        // 当前浏览器的高度
        return a
    },
    getterStyleBarContentLayerXY(state) {
        let a = state.styleBarContentLayerXY
        a.top = a.top - 60
        return a
    },
    getterOperateBarContentLayerXY(state) {
        let a = state.operateBarContentLayerXY
        a.y = a.y - 100
        a.x = a.x - 200 - 20
        // 当前浏览器的高度
        return a
    }
}
export default new Vuex.Store({
    state, mutations, getters
})